<template>
  <header id="head_top">
    <slot name="before"></slot>
    <section class="goBack" v-if="goBack" @click="goHistory" >&#xe600;</section>
    <section class="head-title" v-if="headTitle">
      <span class="title">{{headTitle}}</span>
    </section>
    <section class="setMore" v-if="setMore" @click='actionSheet'>&#xe625;</section>
    <slot name="after"></slot>
  </header>
</template>

<script>
  import "@/assets/css/weui.min.css";
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        headConfig:{
          show:true,
          title:"库存管理",
          oper:true,
          goBack:true
        }
      }
    },
    props: ["headTitle", "goBack", "setMore"],
    methods:{
      goHistory:function(){
          console.log("我进来了说明是可以的哦！")
          this.$router.go(-1);
      },
      actionSheet:function(){
        this.$emit('actionSheet');
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import "../assets/css/mixin.scss";
  #head_top {
    @include wh(100%, 50px);
    @include fj();
    @include sc(20px, #353535);
    @include border(bottom)
    background: #fff;
    .goBack,
    .setMore {
      @include wh(50px, 50px);
      @include iconfont(30px);
      text-align:center;
    }
  }
</style>

